<script setup lang="ts">
import { logout, back } from '@/hooks/index'
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
</script>
<template>
  <div class="title">关于我们</div>
  <div class="userInfo">
    <el-descriptions title="User Info"  v-if="userStore.user.token">
      <el-descriptions-item label="Username">{{  userStore.user.name }}</el-descriptions-item>
      <el-descriptions-item label="Telephone">{{  userStore.user.mobole }}</el-descriptions-item>
      <el-descriptions-item label="Email">{{  userStore.user.email }}</el-descriptions-item>
      <el-descriptions-item label="Address">{{  userStore.user.address }}</el-descriptions-item>
    </el-descriptions>
    <div v-else>
      <h2>登录后查看个人信息</h2>
    </div>
  </div>
  <div class="btns">
    <el-button type="primary" @click="back">返回上一页</el-button>
    <el-button @click="logout" v-if="userStore.user.token">退出登录</el-button>
  </div>
</template>
<style lang="scss" scope>
  .title {
    width: 100%;
    text-align: center;
    margin: 40px auto;
    font-size: 30px;
  }
  .userInfo {
    width: 1000px;
    padding: 20px;
    margin: 60px auto 0;
    box-shadow: 1px 1px 5px #eee;
  }

  .btns {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
</style>